<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, computed } from 'vue'
	import { getDeviceGoods, addShopCar } from '@/api/shop'
	import { useUserStore } from '@/store/user'
	
	const user = useUserStore()
	const loading = ref(true)
	const id = ref('1')
	const list = ref([])
	const num = ref(1)
	const price = ref(0)
	let lowerPrice = 0
	const totalPrice = computed(() => {
		let curTotal = num.value * price.value
		if(id.value == '1' && num.value > 1) {
			curTotal = curTotal + (200 - num.value * 200) * num.value
		}
		else if(id.value == '2' && curTotal < lowerPrice) curTotal= lowerPrice
		return curTotal
	})
	let form = {}
	
	function getData() {
		loading.value = true
		getDeviceGoods(id.value, user.addressIds[2]).then(res => {
			let result = res.result || {}
			let data = result.devices || []
			form = result
			price.value = result.prices && result.prices[0] && result.prices[0].price || 0
			lowerPrice = result.prices && result.prices[0] && result.prices[0].lowerPrice || 0
			list.value = data
			if(result.prices && result.prices[0]) loading.value = false
			else loading.value = true
		}).catch(() => loading.value = false)
	}
	function addCar() {
		if(loading.value) return
		loading.value = true
		let data = {
			goodsId: form.groupId,
			type: 'DEVICE',
			num: num.value
		}
		addShopCar(data).then(res => {
			uni.showToast({icon: 'success', title: '添加成功'})
			user.shopCarAction(false)
			loading.value = false
		}).catch(() => loading.value = false)
	}
	function goBuy() {
		if(loading.value || form.price < 1000) return
		loading.value = true
		let children = list.value.map(item => {
			return {
				id: item.deviceId,
				name: item.deviceName,
				furl: item.image && item.image.furl || '',
				price: item.price,
				specs: item.specs,
				number: item.quantity
			}
		})
		let data = {
			total: price.value,
			list: [{
				id: form.groupId,
				name: form.groupName,
				furl: form.images && form.images[0] && form.images[0].furl || '',
				price: price.value,
				specs: '天',
				number: num.value,
				type: 'DEVICE',
				children: children
			}]
		}
		uni.navigateTo({
			url: '/pages/shop/orderConfirm',
			success: res => {
				res.eventChannel.emit('orderConfirm', data)
			}
		})
		loading.value = false
	}
	
	onLoad((option) => {
		let title = '智慧监管餐车'
		if(option.title) {
			title = option.title
		}
		uni.setNavigationBarTitle({
			title
		})
		if(option.id) id.value = option.id
		getData()
	})
</script>

<template>
	<view class="app-container">
		<view class="app-content" v-if="list.length">
			<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-06-24/1750749951186_device_head.png" 
				width="100%" height="498"></uv-image>
			<view class="goods-head">
				<view class="title">智慧餐车整体介绍</view>
				<view class="divide-box">
					<view class="line"></view>
					<view class="circle"></view>
				</view>
				<view class="des">
					智慧餐车融合AI视觉晨检机器人、智能留样柜、直播摄像机、超大容量冰柜、UPS供电等设备，联动食品安全实时监管系统，可同时为2000人提供餐饮和食品安全保障。
				</view>
			</view>
			<view class="goods-center">
				<view class="title">关键设备及功能</view>
				<view class="divide-box">
					<view class="line"></view>
					<view class="circle"></view>
				</view>
				<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-06-24/1750751283180_device_0.png"
					width="100%" height="1084" mode="widthFix"></uv-image>
				<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-06-24/1750751298480_device_1.png"
					width="100%" height="1492" mode="widthFix"></uv-image>
				<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-06-24/1750751311331_device_2.png"
					width="100%" height="964" mode="widthFix"></uv-image>
				<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-06-24/1750751330080_device_3.png"
					width="100%" height="826" mode="widthFix"></uv-image>
				<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-06-24/1750751347586_device_4.png"
					width="100%" height="830" mode="widthFix"></uv-image>
				<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-06-24/1750751360412_device_5.png"
					width="100%" height="744" mode="widthFix"></uv-image>
				<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-06-24/1750751372882_device_6.png"
					width="100%" height="1272" mode="widthFix"></uv-image>
				<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-06-24/1750751393981_device_7.png"
					width="100%" height="1086" mode="widthFix"></uv-image>
				<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-06-24/1750751410518_device_8.png"
					width="100%" height="738" mode="widthFix"></uv-image>
			</view>
			<view class="goods-bottom">
				<view class="title">配置清单</view>
				<view class="divide-box">
					<view class="line"></view>
					<view class="circle"></view>
				</view>
				<view class="des">本清单所列配置仅供参考，具体配置及规格请以实际交付车辆为准。</view>
				<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-06-27/1750989591945_device_b.png"
					width="100%" height="1086" mode="widthFix"></uv-image>
			</view>
		</view>
		<view class="empty-box" v-else-if="!loading">
			<empty text="没有找到该设备下的商品"></empty>
		</view>
		<view class="app-bottom">
			<view class="bottom-left">
				<view class="left-num">
					<text>选择天数：</text>
					<uv-number-box v-model="num" inputWidth="62rpx" integer :min="1" :max="3" :disabled="loading">
						<template v-slot:minus="{disabled}">
							<view :class="['operate-box', 'minus', disabled? 'disabled' : '']">
								<uv-icon name="minus" color="#CCCCCC" size="24" bold></uv-icon>
							</view>
						</template>
						<template v-slot:plus="{disabled}">
							<view :class="['operate-box', 'plus', disabled? 'disabled' : '']">
								<uv-icon name="plus" color="#FFFFFF" size="24" bold></uv-icon>
							</view>
						</template>
					</uv-number-box>
				</view>
				<view class="bottom-total">总计：<text class="text-price">{{totalPrice? totalPrice.toFixed(2) : 0.00}}</text></view>
			</view>
			<view class="bar-btn" :class="loading || !form.groupId? 'btn-disabled' : ''">
				<view class="btn-add" @click="addCar">加入购物车</view>
				<view :class="['btn-buy', form.price < 1000? 'btn-disabled' : '']" @click="goBuy">立即租赁</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-bottom: 132rpx;
		.app-content{
			.divide-box{
				padding: 16rpx 0 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 2rpx;
				.line{
					width: 34rpx;
					height: 6rpx;
					background-color: #D8340E;
					border-radius: 6rpx;
				}
				.circle{
					width: 6rpx;
					height: 6rpx;
					background-color: #D8340E;
					border-radius: 6rpx;
				}
			}
			.title{
				text-align: center;
				font-weight: 600;
				font-size: var(--theme-xl);
				line-height: var(--theme-xl-line);
			}
			.goods-head{
				margin-bottom: 24rpx;
				padding: 28rpx 34rpx;
				background-color: #FFFFFF;
				.des{
					color: #282828;
				}
			}
			.goods-center{
				margin-bottom: 24rpx;
				padding-top: 44rpx;
				background-color: #FFFFFF;
			}
			.goods-bottom{
				padding: 28rpx 0 32rpx;
				background-color: #FFFFFF;
				.des{
					margin: 0 24rpx 24rpx;
					padding: 18rpx;
					background-color: #FBF5F5;
					border-radius: 8rpx;
					font-size: var(--theme-sm);
					line-height: var(--theme-sm-line);
				}
			}
		}
		.empty-box{
			margin: 24rpx;
			padding: 24rpx;
			background-color: #FFFFFF;
			border-radius: 12rpx;
		}
		.app-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 10;
			height: 132rpx;
			padding: 16rpx 24rpx;
			background-color: #FFFFFF;
			border-top: 2rpx solid #D7DBE1;
			display: flex;
			align-items: center;
			.bottom-left{
				flex-shrink: 0;
				font-size: var(--theme-sm);
				line-height: var(--theme-sm-line);
				.left-num{
					display: flex;
					align-items: center;
					font-weight: 600;
					.operate-box{
						width: 44rpx;
						height: 44rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #FA3F00;
						&.minus{
							background-color: #FFFFFF;
							border: 2rpx solid #D7DBE1;
							&.disabled{
								background-color: #f7f8fa;
							}
						}
						&.plus.disabled{
							background-color: #ffa98d;
						}
					}
					::v-deep .uv-number-box__input{
						background-color: #FFFFFF !important;
					}
				}
				.bottom-total{
					margin-top: 6rpx;
					color: #999999;
					.text-price{
						font-weight: 600;
						color: #FF0D0D;
						&::before{
							content: "¥";
							font-size: 60%;
						}
					}
				}
			}
			.bar-btn{
				flex: 1;
				flex-shrink: 0;
				display: flex;
				justify-content: flex-end;
				line-height: 80rpx;
				color: #FFFFFF;
				font-weight: 600;
				text-align: center;
				.btn-add{
					width: 204rpx;
					height: 80rpx;
					background: linear-gradient( 102deg, #FA3F00 0%, #FF7445 100%);
					border-radius: 80rpx 0 0 80rpx;
				}
				.btn-buy{
					width: 176rpx;
					height: 80rpx;
					background: linear-gradient( 245deg, #F92E1D 0%, #FF3E49 100%);
					border-radius: 0 80rpx 80rpx 0;
				}
			}
			.btn-disabled{
				opacity: 0.4;
			}
		}
	}
</style>